import * as echarts from 'echarts';
//能耗统计 - 能耗资产信息
export const energyStatisticsEcharts = (data) => {
  let data2 = [];
  data.data.forEach(papar => {
    data2.push(papar);
    data2.push(
      {
        value: 2,
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      },
    )
  });
  let option = {
    title: {
      text: "200",
      subtext: "个",
      x: "center",
      y: "23%",
      textStyle: {
        fontSize: 18,
        fontWeight: "normal",
        color: '#fff',
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 14,
      },
    },
    grid: {
      bottom: 10,
      left: 0,
      right: "10%",
    },
    legend: {
      data: data.data,
      icon: "circle",
      show: true,
      bottom: 0,
      itemWidth: 7,
      itemHeight: 7,
      textStyle: {
        color: "#fff",
        fontSize: 10,
        fontWeight: 400,
      },
      itemGap: 10,//间距
    },
    series: [
      // 主要展示层的
      {
        radius: ["75%", "68%"],
        center: ["50%", "40%"],
        type: "pie",
        //hoverAnimation: false, //触摸效果
        // clockWise: false,   //逆时针
        itemStyle: {
          normal: {

            color: function (params) {
              return data.color[params.dataIndex];
            },
          },
        },
        data: data2,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
      },
      // 边框阴影的设置
      {
        id: 2,
        radius: ["75%", "55%"],
        center: ["50%", "40%"],
        type: "pie",
        hoverAnimation: false, //触摸效果
        // clockWise: false,
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return data.color[params.dataIndex];
            },
            opacity: 0.3,
          },
        },
        data: data2,
      },

    ],
  };
  return option;
}

export const alarmEcharts = (data) => {
  let arrName = getArrayValue(data.data, "name");
  let arrValue = getArrayValue(data.data, "value");
  let sumValue = getsumValue(data.data, "value");
  let optionData = getData(data.data);

  //数据和
  function getsumValue(array, key) {
    let sum = 0;
    for (let i = 0; i < array.length; i++) {
      sum = sum + array[i].value;
    }
    return sum;
  }
  //数据值
  function getArrayValue(array, key) {
    var key = key || "value";
    var res = [];
    if (array) {
      array.forEach(function (t) {
        res.push(t[key]);
      });
    }
    return res;
  }
  //图表值
  function getData(data1) {
    var res = {
      series: [],
      yAxis: [],
      formatter: [],
    };
    for (let i = 1; i <= data1.length; i++) {
      res.series.push({
        name: "异常",
        type: "pie",
        //clockWise: true,
        z: 2,
        hoverAnimation: false,
        clockWise: false,   //逆时针
        radius: [95 - i * 12 + "%", 90 - i * 12 + "%"],
        center: ["30%", "55%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            borderRadius: [0, 100, 0, 100],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: data.colorList[i - 1].c2,
              },
              {
                offset: 1,
                color: data.colorList[i - 1].c1,
              },
            ]),
          },
        },
        data: [
          {
            value: data1[i - 1].value,
            name: data1[i - 1].name,
          },
          {
            value: sumValue - data1[i - 1].value,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
      });
      res.series.push({
        name: "背景线",
        type: "pie",
        silent: true,
        z: 1,
        clockWise: true,
        hoverAnimation: false,
        radius: [93 - i * 12 + "%", 92 - i * 12 + "%"],
        center: ["30%", "55%"],
        label: {
          show: false,
        },
        itemStyle: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          borderWidth: 5,
        },
        data: [
          {
            value: 100,
            itemStyle: {
              color: "RGB(12,64,128)",
              borderWidth: 0,
            },
            tooltip: {
              show: false,
            },
            hoverAnimation: false,
          },
        ],
      });
      res.yAxis.push(data1[i - 1].name);
    }
    return res;
  }

  let option = {
    grid: {
      top: "16%",
      bottom: "54%",
      left: "50%",
      containLabel: false,
    },
    legend: [
      {
        bottom: 6,
        icon: "circle",
        orient: "vertical",
        itemHeight: 10,
        itemWidth: 10,
        left: 220,
        top: 40,
        show: true,
        data: arrName,
        selectedMode: false,
        textStyle: {
          color: "#96F5F6",
          fontSize: 12,
        },
        formatter: function (name) {
          let tarValue;
          for (var i = 0; i < data.data.length; i++) {
            if (data.data[i].name == name) {
              tarValue = data.data[i].value;
              break;
            }
          }
          var p = Math.round((tarValue / sumValue) * 1000) / 10;
          return `${name}     ${p}%`;
        },
      }, {
        bottom: 2,
        icon: "rect",
        orient: "vertical",
        itemHeight: 0,
        itemWidth: 0,
        left: 110,
        top: 20,
        show: true,
        data: arrName,
        selectedMode: false,
        textStyle: {
          color: "#96F5F6",
          fontSize: 8,
        },
        itemGap: 3,//间距
        formatter: function (name) {
          let tarValue;
          for (var i = 0; i < data.data.length; i++) {
            if (data.data[i].name == name) {
              tarValue = data.data[i].value;
              break;
            }
          }
          return tarValue;
        },
      }
    ],
    yAxis: [
      {
        type: "category",
        inverse: true,
        z: 3,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          interval: 0,
          inside: false,
          textStyle: {
            color: "RGB(78,184,252)",
            fontSize: 25,
          },
        },
        data: optionData.yAxis,
      },
    ],
    xAxis: [
      {
        show: false,
      },
    ],
    series: optionData.series,
  };
  return option;
}

export const monthEnergyEcharts = (data) => {
  let s = [];
  for (let i = 0; i < data.data.length; i++){
    let a = {
      name: data.name[i],
      type: 'line',
      symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
      showAllSymbol: true,
      symbolSize: 1,
      smooth: true,
      lineStyle: {
          normal: {
              width: 2,
              color: data.color[i][0], // 线条颜色
          },
          borderColor: 'rgba(255,170,0,0.4)',
      },
      itemStyle: {
          color: data.color[i][0],
      },
      tooltip: {
        trigger: 'axis',
          show: true,
      },
      areaStyle: {
          //区域填充样式
          normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                      {
                          offset: 0,
                          color: data.color[i][1],
                      },
                      {
                          offset: 1,
                          color: data.color[i][2],
                      },
                  ],
                  false
              ),
              //shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
              shadowColor: data.color[i][1], //阴影颜色
              shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          },
      },
      data: data.data[i],
  }
    s.push(a);
    console.log(s);
  }
  let option = {
    tooltip: {
        trigger: 'axis',

    },
    legend: {
        //align: 'left',
        right: '0px',
        //type: 'plain',
        top:'10px',
        textStyle: {
            color: '#E4F3FF',
            fontSize: 12,
        },
        itemGap: 25,
        itemWidth: 18,
        // icon:'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
    },
    grid: {
        top: '50px',
        left: '50px',
        right: '30px',
        bottom: '15%',
        // containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#666',
                    padding: 10,
                    fontSize: 12,
                },
                formatter: function (data) {
                    return data;
                },
            },
            axisTick: {
                show: false,
            },
            data: data.xLabel,
        },
    ],
    yAxis: [
        {
            // name: '利用率',
            // nameTextStyle: {
            //     color: '#7ec7ff',
            //     fontSize: 12,
            //     padding: 10,
            // },
            min: 0,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#666',
                    padding: 10,
                },
                formatter: function (value) {
                    if (value === 0) {
                        return value;
                    }
                    return value;
                },
            },
            splitLine: {
              show: true,
              lineStyle: {
                  color: 'rgba(200,200,200,0.5)',
                  type:'dashed'
              },
          },
            // axisTick: {
            //     show: false,
            // },
        },
    ],
    series: s,
};
return option;
}
